<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
                <el-breadcrumb-item>账户管理</el-breadcrumb-item>
                <el-breadcrumb-item>借款详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
<!--主体详情展示-->
        <div>
            <el-descriptions class="margin-top" title="详细信息" :column="3"  border>
                <template slot="extra">
                    <el-button type="primary" size="small" @click="goback()">返回列表</el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user-solid"></i>
                        姓名
                    </template>
                    {{LoadMessage.lName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-phone-outline"></i>
                        手机号
                    </template>
                    {{LoadMessage.lMobile}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-postcard"></i>
                        身份证
                    </template>
                    {{LoadMessage.lIdcard}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-male"></i>
                        用户标识
                    </template>
                    {{LoadMessage.lUid}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-coin"></i>
                        产品名称
                    </template>
                    {{LoadMessage.lProductName}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-collection-tag"></i>
                        借据号
                    </template>
                    {{LoadMessage.lReceiptNo}}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-sort"></i>
                        信用额度
                    </template>
                    {{LoadMessage.lCreditLimit}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-sort-down"></i>
                        已用额度
                    </template>
                    {{LoadMessage.lUsedLimit}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-timer"></i>
                        借款发起时间
                    </template>
                    {{LoadMessage.lLoadStartTime}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-data"></i>
                        分期期数
                    </template>
                    {{LoadMessage.lStagesNum}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-finished"></i>
                        是否结清
                    </template>
                    {{LoadMessage.lLoadSettle==0?"未结清":"已结清"}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-coin"></i>
                        借款金额
                    </template>
                    {{LoadMessage.lLoadMoney}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-coin"></i>
                        总利息
                    </template>
                    {{LoadMessage.lIntestall}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-edit-outline"></i>
                        还款方式
                    </template>
                    {{LoadMessage.lRepaymentMethod==1?"按日计息":"按期还款"}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-coin"></i>
                        利率
                    </template>
                    {{LoadMessage.lRate}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-collection-tag"></i>
                        信用分
                    </template>
                    {{LoadMessage.lScore}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        借款到账时间
                    </template>
                    {{LoadMessage.lLoadCollectionTime}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        收款卡
                    </template>
                    {{LoadMessage.lCollectionBankcard}}
                </el-descriptions-item>
            </el-descriptions>
        </div>


        <!--分期数据详情展示-->
        <div>
            <el-table
                    :data="LoadList"
                    style="width: 100%"
                    :row-style="selectedstyle">
                <!--
                    label	显示的标题
                    prop	对应列内容的字段名，也可以使用 property 属性
                -->
                <el-table-column
                        prop="rRate"
                        label="利率"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="rNum"
                        label="期数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="rRepaymentTime"
                        label="还款时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="rRepaymentStatus"
                        label="是否结清"
                        width="180"
                        show-overflow-tooltip
                        :formatter="methodFormtype">
                </el-table-column>
                <el-table-column
                        prop="rOverdueDays"
                        label="当期逾期天数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="rOverdueCharge"
                        label="当期逾期罚息"
                        width="180">
                </el-table-column>
            </el-table>
        </div>
        <!--分页模块-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5,10,20,30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LoadDetailed",
        data(){
            return{
                lId:this.$route.params.lId,
                LoadMessage:{},//单条数据详情
                LoadList:[],//分期详情
                pageNum: 1,
                pageSize: 5,
                total:0,//共多少条
            }
        },
        methods:{
            //根据信息来渲染不同的布局属性
            selectedstyle ({row, rowIndex}) {
                if(row.rRepaymentStatus==1){
                    return {
                        "background-color": "#ABEA7F"
                    };
                }else if(row.rRepaymentStatus==0){
                    return {
                        "background-color": "#C9C5C8"
                    };
                }
            },
            goback(){//退出
                location.href="/loadmanager"
            },
            //查看分期详情代码
            findLoadList(){
                let url=this.$baseUrl+"loanApplication/findLoadList";
                this.$axios.get(url,{
                    params:{
                        lReceiptNo:this.LoadMessage.lReceiptNo,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.LoadList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total
                    }else {
                        this.$alert("查询失败!")
                    }
                })
            },
            handleSizeChange(size){
                this.pageSize = size;
                this.findLoadList();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.findLoadList();
            },
            methodFormtype(row, column, cellValue) {
                if (cellValue == 1) {
                    return '结清';
                } else if (cellValue == 0) {
                    return '未结清';
                }
            },
            queryall(){
                let url =this.$baseUrl+"loanApplication/showOneLoan/"+this.lId
                this.$axios.get(url).then(res=>{
                    if (res.data.code == 200){
                        this.LoadMessage=res.data.data;
                        this.findLoadList()
                    }else {
                        this.$alert("查询失败!")
                    }

                })
            }
        },
        created(){
            this.queryall();
        }
    }
</script>

<style scoped>

</style>